<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>商家列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
	<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
	<script type="text/jscript" th:src="@{/plugin/jquery/jquery.min.js}"></script>
</head>
<body>
	<div class="site-text" style="margin: 5%; display: none" id="window"  target="test123">	
	<form class="layui-form" id="book" method="post" lay-filter="example">
	  <div class="layui-form-item">
	    <label class="layui-form-label">商店名</label>
	    <div class="layui-input-block">
	      <input type="text" id="store_name" name="store_name"  lay-verify="title" autocomplete="off" placeholder="请输入商店名" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商店地址</label>
	    <div class="layui-input-block">
	      <input type="text" id="store_address" name="store_address" lay-verify="title" autocomplete="off" placeholder="请输入地址" class="layui-input">
	      
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商家类型</label>
	    <div class="layui-input-block">
	      <!-- <input type="text" id="store_type" name="store_type" lay-verify="title" autocomplete="off" placeholder="请输入商家类型" class="layui-input"> -->
		  <select id="store_type" name="store_type" lay-verify="required">
	        <option value=""></option>
	        <option value="0">餐饮</option>
	        <option value="1">零售</option>
	        <option value="2">休闲</option>
	        <option value="3">娱乐</option>
	        <option value="4">服装</option>
	      </select>
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">授权状态</label>
	    <div class="layui-input-block">
	      <select id="store_stats" name="store_stats" lay-verify="required">
	        <option value=""></option>
	        <option value="0">未授权</option>
	        <option value="1">已授权</option>
	      </select>
	    </div>
	  </div>
	  
	 
	 <!--  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
	    </div>
	  </div> -->
	</form>
</div>
	<table class="layui-hide" id="demo" lay-filter="test"></table>
	<script type="text/html" id="barDemo" >
		<a class="layui-btn layui-btn-xs" lay-event="getKey">首次生成商家key</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
	<script id="toolbarDemo" type="text/html">
 	 <div class="layui-btn-container">
    	<button class="layui-btn layui-btn-sm" lay-event="add">新建商家</button>
 	 </div>
	</script>
	<script type="text/javascript"  th:inline="none">
	layui.use(['laydate', 'laypage', 'layer', 'table', 'upload', 'element','form'], function(){
		  var laydate = layui.laydate //日期
		  ,laypage = layui.laypage //分页
		  ,layer = layui.layer //弹层
		  ,table = layui.table //表格
		  ,upload = layui.upload //上传
		  ,element = layui.element //元素操作
		  ,form = layui.form
		  ,$=layui.$;
		  
		  //监听Tab切换
		  element.on('tab(demo)', function(data){
		    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
		      tips: 1
		    });
		  });
		  
	//table
	 table.render({
		    elem: '#demo'
		    ,height: 420
		    ,url: 'selectAll' //数据接口
		    ,title: '用户表'
		    ,page: true //开启分页
		    ,height : 'full-75'
		    ,toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
		    ,cols: [[ //表头
		      {type: 'checkbox', fixed: 'left'}
		      ,{field: 'store_id', title: '序号', width:100, sort: true, fixed: 'left'}
		      ,{field: 'store_name', title: '商家名字', width:400}
		      ,{field: 'store_address', title: '商家地址', width: 500, sort: true}
		      ,{templet:function(data){
		    	  if(data.store_stats==0)return "未授权";
		    	  if(data.store_stats==1)return "已授权";
	          },title:'支付状态',width: 100, sort: true}
		      ,{fixed: 'right', width: 400, align:'center', toolbar: '#barDemo'}
		    ]]
		  });
		layui.use('table', function() {
			var table = layui.table;

		});
		
		 //监听头工具栏事件
		  table.on('toolbar(test)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id)
		    ,data = checkStatus.data; //获取选中的数据
		    switch(obj.event){
		      case 'add':
		        layer.open({
		        	type: 1 
		               ,title: ['新增商户']
		               ,btn: ['确定', '取消'] 
		               ,shadeClose: true
		               ,shade: 0 
		               ,maxmin: true 
		               ,content: $("#window")
		               ,yes:function(index,layero){
		            	 console.log($('#store_stats').val());
		            	   $.getJSON("/store/info/insert",{
		            		   store_name: $('#store_name').val(),
		               		  store_address: $('#store_address').val(),
		               		store_stats: $('#store_stats').val(),
		               		store_type: $('#store_type').val()
		            	   },function(data){
		            		  if(data.code==0){
		            			  alert(data.msg);
		            			  layer.close(index);
		            			  location.reload();
		            		  }else{
		            			  alert(data.msg);
		            		  }
		            	   })
		               }
		        });
		      break;
		      case 'update':
		        if(data.length === 0){
		          layer.msg('请选择一行');
		        } else if(data.length > 1){
		          layer.msg('只能同时编辑一个');
		        } else {
		          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
		        }
		      break;
		      case 'delete':
		        if(data.length === 0){
		          layer.msg('请选择一行');
		        } else {
		          layer.msg('删除');
		        }
		      break;
		    };
		  });
		  
		  //监听行工具事件
		  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		    var data = obj.data //获得当前行数据
		    ,layEvent = obj.event; //获得 lay-event 对应的值
		    if(layEvent === 'getKey'){
		    	$.getJSON("/store/info/getKey",{
		        	store_id: data.store_id
		        },function(data){
		        	if(data.code==0){
		        		layer.alert("生成成功,商家码为:"+data.data)
		        	}else{
		        		layer.alert(data.msg)
		        	}
		        })
		    	
		    	
		    } else if(layEvent === 'del'){
		      layer.confirm('真的删除行么', function(index){
		        obj.del(); //删除对应行（tr）的DOM结构
		        layer.close(index);
		        //向服务端发送删除指令
		        $.getJSON("/store/info/delete",{
		        	store_id: data.store_id
		        },function(data){
		        	if(data.code==0){
		        		layer.alert(data.msg)
		        	}else{
		        		layer.alert(data.msg)
		        	}
		        })
		      });
		    } else if(layEvent === 'edit'){
		    	layer.open({
		        	type: 1 
		               ,title: ['修改信息']
		               ,btn: ['确定', '取消'] 
		               ,shadeClose: true
		               ,shade: 0 
		               ,maxmin: true 
		               ,content: $("#window")
		               ,success:function(layero,index){
			                 $('#store_name').val("您无权修改此项");
			                 $('#store_address').val(data.store_address); 
			                 $('#store_stats').val(data.store_stats);  
		               }
		               ,yes:function(index,layero){
		            	   $.getJSON("/store/info/update_manager",{
		            		   store_id: data.store_id,
		            		   store_name: $('#store_name').val(),
		               		  store_address: $('#store_address').val(),
		               		store_stats: $('#store_stats').val()
		            	   },function(data){
		            		  if(data.code==0){
		            			  layer.alert(data.msg);
		            			  layer.close(index);
		            			  location.reload();
		            		  }else{
		            			  layer.alert(data.msg);
		            		  }
		            	   })
		               }
		        });
		    }
		  });
	});
	</script>
</body>
</html>